/**
*Desc: 横向柱状图
*Create by: boet-g
*Create time:2024/10/25/15:49
*/
<template>
  <div class="container_box">
    <div :id="id" style="width: 100%;height: 100%" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {GridComponent, TooltipComponent} from 'echarts/components'
import {BarChart, PictorialBarChart} from 'echarts/charts'
import {CanvasRenderer} from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  GridComponent,
  PictorialBarChart,
  BarChart,
  CanvasRenderer
])

export default {
  name: 'HorizontalBarChart',
  components: {},
  props: {
    id: {
      type: String,
      default: 'HorizontalBarChart'
    },
    data: {
      type: Object,
      default: ()=>{
      }
    },
    chartsConfig: {
      type: Object,
      default: ()=>{
      }
    }
  },
  data() {
    return {
      option: {},
      myChart: null,
      // 组件内部默认配置
      defaultConfig: {
        isDarkTheme: false,
        backgroundColor: 'transparent',
        lineColor: '#282938',
        height: '100%',
        barWidth: 20
      }
    }
  },
  computed: {
    // props.data 的镜像
    computedParams: {
      get() {
        return this.data
      }
    },
    finalConfig: {
      get() {
        return Object.assign(this.defaultConfig, this.chartsConfig)
      }
    }
  },
  watch: {
    computedParams: {
      handler(newValue, oldValue) {
        if (!newValue) return
        const _this = this
        _this.newValue = newValue
        const {backgroundColor, barWidth} = this.finalConfig
        this.option = {
          backgroundColor: backgroundColor,

          grid: {
            top: '0',
            left: '50',
            right: '0',
            bottom: '0'
          },
          xAxis: {
            type: 'value',
            show: false,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontWeight: 'bold'
            },
            data: this.data.category
          },
          series: [
            {
              type: 'bar',
              barWidth: barWidth,
              label: {
                show: true,
                position: 'top',
                offset: [50, 0],
                formatter: function(data, index) {
                  return `${data.data.wellCount?data.data.wellCount :0}口井，${data.value}${_this.data.unit}`
                }
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 4,
                },
              },
              data: this.data.data
            }
          ]
        }
      },
      deep: true,
      immediate: true
    },
    option: {
      handler(newValue) {
        if (Object.keys(newValue).length !== 0) {
          this.initChart()
        }
      },
      deep: true,
      immediate: false
    },
    // 监听皮肤
    'finalConfig.isDarkTheme': {
      handler(flag) {
        this.myChart?.dispose()
        this.myChart = null
        this.initChart(flag)
      }
    }
  },
  created() {
  },
  mounted() {
    this.initChart()
  },
  methods: {
    // 渲染
    initChart(isDarkTheme = this.finalConfig.isDarkTheme) {
      if (!this.myChart) {
        const dom = document.getElementById(this.id)
        this.myChart = echarts.init(dom, isDarkTheme ? 'dark' : 'light', {
          renderer: 'canvas',
          useDirtyRect: false
        })
        if (this.option && typeof this.option === 'object') {
          this.myChart.setOption(this.option)

          // 开启监听盒子尺寸
          const fn = ()=>{
            this.myChart?.resize()
            this.boxWidth = dom.clientWidth
          }
          // 销毁盒子
          const destroyCallback = ()=>{
            this.myChart?.dispose()
            this.myChart = null
          }
        }
      } else {
        this.myChart.setOption(this.option, true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tools-box {
  position: absolute;
  right: 6px;
  top: 4px;
  z-index: 10;
  font-size: 16px;
}

.container_box {
  position: relative;
  height: 100%;
}
</style>
